<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米产品布局案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .nav,
        .title,
        .body {
            margin: 0 auto !important;
        }

        h2 {
            font-weight: normal;
            color: #333377;
            display: inline-block;
        }

        .title {
            width: 1240px;
        }

        .title span {
            font-size: 16px;
            color: #424242;
            text-align: right;
            float: right;
        }

        a {
            text-decoration: none;
        }

        ul,
        li {
            list-style: none;
        }

        .body {
            width: 1240px;
            height: 638px;
            background-color: #f5f5f5;
        }

        .box1 {
            width: 234px;
            height: 638px;
            background-color: #ffffff;
            margin: 0 4px 0 0;
            float: left;
        }

        .box2 .bigbox li {
            width: 234px;
            height: 260px;
            padding: 26px 0;
            margin: 0 6px 12px 6px;
            background-color: #ffffff;
            background-position: center top;
            float: left;
        }

        .box2 .bigbox li img {
            margin: 0 34px;
        }

        h3 {
            text-decoration: none;
            color: #414141;
            font-size: 14px;
            font-weight: 400;
            width: 214px;
            height: 21px;
            margin: 0 10px 2px;
            text-align: center;
        }

        .desc {
            color: #B0B0B0;
            font-size: 12px;
            margin: 0 10px 10px;
            text-align: center;
        }

        .value {
            width: 214px;
            height: 21px;
            font-size: 14px;
            color: #FF6700;
            text-align: center;
            margin: 0 10px 14px;
        }

        .delate {
            text-decoration: line-through;
            color: #B0B0B0;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="title">
            <h2>手机</h2>
            <span>查看更多 ></span>
        </div>

        <div class="body">
            <div class="box1">
                <ul>
                    <li>
                        <img src="images/img.webp" alt="" width="234px" height="614px">
                    </li>
                </ul>
            </div>
            <div class="box2">
                <ul class="bigbox">
                    <li><a href="#"><img src="images/img2.webp" alt="" width="160" height="160">
                            <h3>REDMI K80 Pro</h3>
                            <p class="desc">骁龙8至尊版|2K新国屏|全焦段影像</p>
                            <p class="value">
                                <span class="num">4399</span>
                                元
                                <span>起</span>
                            </p>
                        </a>
                    </li>
                    <li><a href="#"><img src="images/img3.webp" alt="" width="160" height="160">
                            <h3>REDMI K80</h3>
                            <p class="desc">第三代骁龙8|2K新国屏|6550mAh超...</p>
                            <p class="value">
                                <span class="num">2499</span>
                                元
                                <span>起</span>
                            </p>
                        </a>
                    </li>
                    <li><a href="#"><img src="images/img4.webp" alt="" width="160" height="160">
                            <h3>Xiaomi 15</h3>
                            <p class="desc">徕卡光学Summilux高速镜头|骁龙回...</p>
                            <p class="value">
                                <span class="num">4499</span>
                                元
                                <span>起</span>
                            </p>
                        </a>
                    </li>
                    <li><a href="#"><img src="images/img5.webp" alt="" width="160" height="160">
                            <h3> Xiaomi 15 Pro</h3>
                            <p class="desc">徕卡光学Summilux高速镜头|骁龙...</p>
                            <p class="value">
                                <span class="num">5299</span>
                                元
                                <span>起</span>
                            </p>
                        </a>

                    </li>
                    <li><a href="#"><img src="images/img6.webp" alt="" width="160" height="160">
                            <h3>Xiaomi 15 定制版</h3>
                            <p class="desc">卡光学Summilux高速镜头|骁龙回...</p>
                            <p class="value">
                                <span class="num">4999</span>
                                元
                                <span>起</span>
                            </p>
                        </a>
                    </li>
                    <li><a href="#"><img src="images/img7.webp" alt="" width="160" height="160">
                            <h3>Redmi Note 14 Pro+</h3>
                            <p class="desc">第三代骁龙®7s</p>
                            <p class="value">
                                <span class="num">4399</span>
                                元
                                <span>起</span>
                                <span class="delate">1999元</span>
                            </p>
                        </a>

                    </li>
                    <li><a href="#"><img src="images/img8.webp" alt="" width="160" height="160">
                            <h3>Redmi Note 14 Pro</h3>
                            <p class="desc">天玑7300-Ultra</p>
                            <p class="value">
                                <span class="num">1399</span>
                                元
                                <span>起</span>
                                <span class="delate">1499元</span>
                            </p>
                        </a>
                    </li>
                    <li><a href="#"><img src="images/img9.webp" alt="" width="160" height="160">
                            <h3>Redmi K70 至尊版</h3>
                            <p class="desc">性能魔王 全面进化</p>
                            <p class="value">
                                <span class="num">2599</span>
                                元
                                <span>起</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>

        </div>

</body>

</html>